<!DOCTYPE html>
<html lang="zh-CN" ng-app="myangular">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
  <style>
  td {
    vertical-align: middle!important;
  }
  
  [ng-cloak] {
    display: block;
  }
  </style>
</head>

<body>
  <div ng-controller="fruitc">
    <input type="text" ng-keyup="addfruit($event)" ng-model="newfruit">
    <ul ng-cloak>
      <li ng-repeat="fruit in fruits track by $index">
        {{fruit}}
      </li>
    </ul>
  </div>
  <script src="node_modules/angular/angular.js"></script>
  <script>
  var app = angular.module('myangular', []);

  app.controller('fruitc', ["$scope", function($scope) {
    $scope.fruits = ["香蕉", "2222"];
    $scope.addfruit = function(e) {
      if (e.keyCode == 13) {
        $scope.fruits.push($scope.newfruit);
        $scope.newfruit = "";
      }
    };
  }]);
  </script>
</body>

</html>